<template>
  <div>
      <el-container>
          <!--头部-->
          <el-header style="background-color: whitesmoke; height: 75px;background-position: center">
              <el-row style="height: 100%;width: 100%">
                  <el-col :span="3">
                      <a href="/home" style="display: block">
                          <img src="/img/syc.jpg" style="float: left;margin-left:20px;width: 150px">
                      </a>
                  </el-col>
              </el-row>
          </el-header>

          <!--主体-->
          <el-main style="margin-top:100px;background-position: center;padding:0">
              <el-row :gutter="20" style="margin: 0 auto; width: 1000px;height: 100%">
                  <el-col :span="14">
                      <img src="/img/login_left.png" style="width: 100%; margin-top: 50px">
                  </el-col>
                  <el-col :span="10">
                      <el-card style="width: 100%;margin-top: 20px;padding:0;border:1px;margin-bottom: 20px">
                          <!--上方选择短信或密码登录-->
                          <el-menu @select="handleSelect" mode="horizontal" :default-active="activeTab" style="background-color: #cbf4e8;
                                padding: 10px 0 0 20px;">
                              <el-menu-item index="1" class="login_title"><b>短信登陆</b></el-menu-item>
                              <el-menu-item index="2" class="login_title"><b>密码登录</b></el-menu-item>
                          </el-menu>

                          <!--手机号登陆-->
                          <el-form v-if="activeTab == '1'" style="margin-top:30px;margin-left: 10px"
                                   :model="mobileForm" :rules="mobileRules" ref="mobileForm" label-width="" class="demo-mobileRules">
                              <p style="color: #666666; text-align: left; font:15px '微软雅黑';margin:30px 0 20px 5px">验证即登录，未注册手机将自动注册</p>

                              <el-form-item label="" prop="phone">
                                  <el-input style="width: 330px;margin:10px 0 0 0" placeholder="请输入手机号码" v-model="mobileForm.phone">
                                      <template slot="prepend">
                                          <i class="el-icon-phone"></i>
                                      </template>
                                  </el-input>
                              </el-form-item>
                              <el-form-item label="" prop="code">
                                  <el-input style="width: 330px;margin:10px 0 0 0" placeholder="请输入验证码" @keydown.native.enter="submitMobileForm('mobileForm')" v-model="mobileForm.code"></el-input>
                              </el-form-item>
                              <el-form-item>
                                  <input v-model="mobileForm.agreement" type="checkbox" style="margin-left: 15px">
                                  <span style="font-size: 10px;color: #666666;margin-left: 5px">我已阅读并接受四叶草园 《用户协议》 《隐私政策》</span>
                              </el-form-item>
                              <el-form-item>
                                  <el-row style="height: 50px;width: 80%;padding-top: 5px;margin: 0 auto">
                                      <el-col :span="12">
                                          <!--TODO 手机号验证码-->
                                          <el-button :disabled="!mobileForm.agreement" type="default" @click="getCode(mobileForm.phone)">获取验证码</el-button>
                                      </el-col>
                                      <el-col :span="12">
                                          <el-button type="primary" @click="submitMobileForm('mobileForm')">登录</el-button>
                                      </el-col>
                                  </el-row>
                              </el-form-item>
                          </el-form>

                          <!--账号密码登录-->
                          <el-form v-if="activeTab == '2'" style="margin-top:30px;margin-left: 10px"
                                   :model="passwordForm" :rules="passwordRules" ref="passwordForm" label-width="" class="demo-passwordRules">

                              <el-form-item label="" prop="userName">
                                  <el-input style="width: 330px;margin:10px 0 0 0"
                                            v-model="passwordForm.userName" placeholder="请输入账号">
                                      <template slot="prepend">
                                          <i class="el-icon-user-solid"></i>
                                      </template>
                                  </el-input>
                              </el-form-item>
                              <el-form-item label="" prop="password">
                                  <el-input type="password" style="width: 330px;margin:10px 0 0 0"
                                            @keydown.native.enter="submitPasswordForm('passwordForm')" v-model="passwordForm.password" placeholder="请输入密码">
                                      <template slot="prepend">
                                          <i class="el-icon-lock"></i>
                                      </template>
                                  </el-input>
                              </el-form-item>
                              <el-form-item ><!--不知道为什么删了这个el-form-item就验证不了密码了，所以留着-->

                              </el-form-item>
                              <el-form-item>
                                  <el-button type="primary" style="width: 330px" @click="submitPasswordForm('passwordForm')">登录</el-button>
                              </el-form-item>
                          </el-form>

                          <!--切换-->
                          <div style="float: right; margin: 20px 50px 30px 0;font: 12px '微软雅黑 Light';">
                              <span ><a href="/reg" style="color: #00cb8e">立即注册</a></span>
                          </div>

                      </el-card>
                  </el-col>
              </el-row>
          </el-main>
      </el-container>
  </div>
</template>
<style>
body{
    margin: 0 auto;
}
body{
    background-image: linear-gradient(to bottom right, #048863, #cbf4e8);
    background-repeat: no-repeat;
    height: 100vh;
}
.el-card>div{
    padding: 0;
}
.login_title{
    font-weight: 18;
    font:18px "微软雅黑 Light";
    border-radius: 5px;
}
.el-menu--horizontal>.el-menu-item.is-active {
    border-bottom: 2px solid #00cb8e;
    color: #00cb8e;
}
.el-form{
    padding-left:  20px;
}
.login_input{
    position: relative;
    padding: 10px;
}

.el-button--default{
    background: #FFF;
    border: 1px solid #DCDFE6;
    color: #606266;
}
.el-button--default:hover{
    background: #FFF;
    border: 1px solid #a1a3a8;
    color: #878a8f;
}
.el-button--default:focus{
    background: #FFF;
    border: 1px solid #DCDFE6;
    color: #606266;
}

.el-button--primary {
    color: #FFF;
    background-color: #00cb8e;
    border-color: #00cb8e;
}

.el-button--primary:focus{
    color: #FFF;
    background-color: #00cb8e;
    border-color: #00cb8e;
}

.el-button--primary:hover {
    color: #00cb8e;
    border-color: #00cb8e;
    background-color: #cbf4e8;
}
h1{
    margin-left: 20px;
    font: 24px -apple-system;
    color: #333333;
    line-height: 40px;
}
</style>
<script>
import BaseUrl from "@/http/BaseUrl";
import SimpleAxios from "@/http/SimpleAxios";

export default {
    data(){
        return{
            activeTab: '1',
            mobileForm: {
                phone: '',
                code:'',
                agreement:false
            },
            passwordForm: {
                userName:'',
                password:'',
            },
            mobileRules: {
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的中国大陆11位手机号', trigger: 'blur' }
                ],
                code: [
                    { required: true, message: '请输入验证码', trigger: 'blur' },
                ]
            },
            passwordRules: {
                userName: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ]
            }
        }
    },
    methods: {

        getCode(phone){
            if (phone.match(/^1[3-9]\d{9}$/)) {
                let url = BaseUrl.PASSPORT + '/passport/users/getCode/'+phone;
                console.log('url=' + url);
                SimpleAxios.post(url).then((response) => {
                    let jsonResult = response.data;
                    if (jsonResult.state == 20000) {
                        this.$message.success("验证码发送成功！")
                    } else {
                        this.$alert(jsonResult.message, '错误', {
                            confirmButtonText: '确定',
                            callback: action => {
                            }
                        });
                    }
                })
            }else{
                this.$message.error( '请输入正确的手机号')
            }
        },

        submitMobileForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let url = BaseUrl.PASSPORT+'/passport/users/login';
                    console.log('url='+url);
                    SimpleAxios.post(url,this.mobileForm).then((response)=>{
                        let jsonResult = response.data;
                        if(jsonResult.state===20000){
                            this.$message({
                                message: '登录成功',
                                type: 'success'
                            });
                            //
                            // localStorage.user=JSON.stringify(response.data.data);
                            // location.href="/";//跳转到首页
                            let loginInfo=jsonResult.data;
                            localStorage.setItem('loginInfo', JSON.stringify(loginInfo));
                            location.href="/home"

                        }else if(jsonResult.state===40100){
                            this.$message({
                                message: jsonResult.message,
                                type: 'error'
                            });
                        }else if(jsonResult.state===60001){
                            this.$message({
                                message:jsonResult.message,
                                type:'error'
                            })
                        }else if(jsonResult.state===60002){
                            this.$message({
                                message:jsonResult.message,
                                type:'error'
                            })
                        }else if(jsonResult.state===40101){
                            this.$message({
                                message:jsonResult.message,
                                type:'error'
                            })
                        }
                        else {
                            this.$alert(jsonResult.message, '错误', {
                                confirmButtonText: '确定',
                                callback: action => {

                                }
                            });
                        }
                    });
                }else{
                    console.log("输入错误");
                    return false;
                }
            });
        },

        submitPasswordForm(formName) {
            /*通过this.$refs[formName].validate进行表单验证，并传入一个回调函数进行验证结果的处理。 */
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let url = BaseUrl.PASSPORT+'/passport/users/login';
                    console.log('url='+url);
                    // 设置请求头为 application/x-www-form-urlencoded

                    SimpleAxios.post(url,this.passwordForm).then((response)=>{
                        let jsonResult = response.data;
                        if(jsonResult.state===20000){
                            this.$message({
                                message: '登录成功',
                                type: 'success'
                            });
                            let loginInfo=jsonResult.data;
                            localStorage.setItem('loginInfo', JSON.stringify(loginInfo));
                            if(jsonResult.data.role===5){
                              // this.$router.push('/admin/index')
                              location.href="/admin/index"
                            }else {
                              location.href="/home"
                            }

                        }else if(jsonResult.state===40100){
                            this.$message({
                                message: jsonResult.message,
                                type: 'error'
                            });
                        }
                        else {
                            this.$alert(jsonResult.message, '错误', {
                                confirmButtonText: '确定',
                                callback: action => {
                                }
                            });
                        }
                    });
                }else{
                    console.log("输入错误");
                    return false;
                }
            });
        },
        handleSelect(key, keyPath) {
            if (key === '1') {
                this.activeTab = '1';
                // this.$refs.mobileRules.clearValidate(); // 清除短信登录表单的校验信息
                this.resetForm('passwordForm');
            } else if (key === '2') {
                this.activeTab = '2';
                this.resetForm('mobileForm');
            }
        },
        /*切换tab时重置另一侧信息*/
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
    created() {
    },
    mounted() {

    }
}
</script>
